import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {actionCreators} from '../store'
import {
    ListItem,
    ListInfo,
    LoadMore
} from '../style'

class List extends Component {
    render() {
        const {articleList,handleLoadMore} = this.props
        return (
            <div>
                {
                    articleList.map((items, index) => (
                        <Link key={index} to={'/detail/'+items.get('id')}>
                            <ListItem>
                                <img className='pic' src={items.get('url')} alt=""/>
                                <ListInfo>
                                    <h3 className='title'>{items.get('title')}</h3>
                                    <p className='desc'>{items.get('desc')}</p>
                                </ListInfo>
                            </ListItem>
                        </Link>
                    ))
                }
                <LoadMore onClick={handleLoadMore}>加载更多...</LoadMore>
            </div>
        )
    }
}

const mapState = (state) => {
    return {
        articleList: state.getIn(['home','articleList'])
    }
}

const mapActionToProps= (dispatch) => {
    return {
        handleLoadMore(){
            dispatch(actionCreators.getLoadMore())
        }
    }
}

export default connect(mapState, mapActionToProps)(List)